<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Header - Translucent</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header translucent>
        <ion-toolbar>
          <ion-title>Header - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="primary">
          <ion-title>Primary - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="secondary">
          <ion-title>Secondary - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="tertiary">
          <ion-title>Tertiary - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="success">
          <ion-title>Success - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="warning">
          <ion-title>Warning - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="danger">
          <ion-title>Danger - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="light">
          <ion-title>Light - Translucent</ion-title>
        </ion-toolbar>
        <ion-toolbar color="medium">
          <ion-title>Medium - Translucent</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content fullscreen>
        <ion-grid>
          <ion-row>
            <ion-col size="6">
              <f class="red"></f>
            </ion-col>
            <ion-col size="6">
              <f class="green"></f>
            </ion-col>
            <ion-col size="6">
              <f class="blue"></f>
            </ion-col>
            <ion-col size="6">
              <f class="yellow"></f>
            </ion-col>
            <ion-col size="6">
              <f class="pink"></f>
            </ion-col>
            <ion-col size="6">
              <f class="purple"></f>
            </ion-col>
            <ion-col size="6">
              <f class="black"></f>
            </ion-col>
            <ion-col size="6">
              <f class="orange"></f>
            </ion-col>
          </ion-row>
        </ion-grid>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lobortis felis, eu sodales enim. Nam
          risus nibh, placerat at rutrum ac, vehicula vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing
          elit. Vestibulum quis elementum ligula, ac aliquet nulla. Mauris non placerat mauris. Aenean dignissim lacinia
          porttitor. Praesent fringilla at est et ullamcorper. In ac ante ac massa porta venenatis ut id nibh. Fusce
          felis neque, aliquet in velit vitae, venenatis euismod libero. Donec vulputate, urna sed sagittis tempor, mi
          arcu tristique lacus, eget fringilla urna sem eget felis. Fusce dignissim lacus a scelerisque vehicula. Nulla
          nec enim nunc. Quisque nec dui eu nibh pulvinar bibendum quis ut nunc. Duis ex odio, sollicitudin ac mollis
          nec, fringilla non lacus. Maecenas sed tincidunt urna. Nunc feugiat maximus venenatis. Donec porttitor, felis
          eget porttitor tempor, quam nulla dapibus nisl, sit amet posuere sapien sapien malesuada tortor. Pellentesque
          habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque luctus, sapien nec
          tincidunt efficitur, nibh turpis faucibus felis, in sodales massa augue nec erat. Morbi sollicitudin nisi ex,
          et gravida nisi euismod eu. Suspendisse hendrerit dapibus orci, non viverra neque vestibulum id. Quisque vitae
          interdum ligula, quis consectetur nibh. Phasellus in mi at erat ultrices semper. Fusce sollicitudin at dolor
          ac lobortis. Morbi sit amet sem quis nulla pellentesque imperdiet. Nullam eu sem a enim maximus eleifend non
          vulputate leo. Proin quis congue lacus. Pellentesque placerat, quam at tempus pulvinar, nisl ligula tempor
          risus, quis pretium arcu odio et nulla. Nullam mollis consequat pharetra. Phasellus dictum velit sed purus
          mattis maximus. In molestie eget massa ut dignissim. In a interdum elit. In finibus nibh a mauris lobortis
          aliquet. Proin rutrum varius consequat. In mollis dapibus nisl, eu finibus urna viverra ac. Quisque
          scelerisque nisl eu suscipit consectetur.
        </p>

        <ion-grid>
          <ion-row>
            <ion-col size="6">
              <f class="red"></f>
            </ion-col>
            <ion-col size="6">
              <f class="green"></f>
            </ion-col>
            <ion-col size="6">
              <f class="blue"></f>
            </ion-col>
            <ion-col size="6">
              <f class="yellow"></f>
            </ion-col>
            <ion-col size="6">
              <f class="pink"></f>
            </ion-col>
            <ion-col size="6">
              <f class="purple"></f>
            </ion-col>
            <ion-col size="6">
              <f class="black"></f>
            </ion-col>
            <ion-col size="6">
              <f class="orange"></f>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-content>
    </ion-app>

    <style>
      f {
        display: block;
        height: 200px;
      }

      .red {
        background-color: #ea445a;
      }

      .green {
        background-color: #76d672;
      }

      .blue {
        background-color: #3478f6;
      }

      .yellow {
        background-color: #ffff80;
      }

      .pink {
        background-color: #ff6b86;
      }

      .purple {
        background-color: #7e34f6;
      }

      .black {
        background-color: #000;
      }

      .orange {
        background-color: #f69234;
      }
    </style>
  </body>
</html>
